<template>
  <span class="moreBtnArr">
    <el-popover placement="bottom" width="100" trigger="click">
      <div class="moreBtnContent">
        <span class="moreItem" slot="reference" v-if="status == 4">
          <el-popover
            placement="bottom"
            width="500"
            trigger="click"
            style="padding: 0px"
          >
            <div class="blockContent flexColumnNo">
              <div class="blockTop flexWrapNo">
                <div class="blockTitle">备注</div>
                <div class="closeBtn" @click="closeCustom">
                  <i class="el-icon-close"></i>
                </div>
              </div>
              <div class="blockMiddle">
                <el-timeline>
                  <el-timeline-item
                    placement="top"
                    v-for="(item, index) in remarkList"
                    :key="index"
                  >
                    <div class="content">
                      <div class="avatar" slot="reference">
                        <span class="text">{{
                          formetter(item.createByName)
                        }}</span>
                      </div>
                      <div class="userInfo">
                        <span>{{ item.createByName }}</span
                        ><span style="margin-left: 10px; color: #7f7f7f">{{
                          item.createTime
                        }}</span>
                        <div class="remark">
                          {{ item.context }}
                        </div>
                      </div>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
              <div class="blockBottom">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                  v-model="textarea"
                >
                </el-input>
                <div class="blockBtn">
                  <el-button
                    size="mini"
                    class="btn-text-blue"
                    @click="saveRemark"
                    >发表</el-button
                  >
                </div>
              </div>
            </div>
            <span
              class="moreItem"
              slot="reference"
              ref="customBtn"
              @click="getRemarkInfo"
            >
              <span class="moreItemText">追加备注</span>
            </span>
          </el-popover>
        </span>

        <span class="moreItem" @click="getDelayInfo" v-if="status > 1">
          <span class="moreItemText">延时批复记录</span>
        </span>
        <span class="moreItem" @click="operateInfo">
          <span class="moreItemText">操作记录</span>
        </span>
      </div>
      <el-button
        slot="reference"
        size="mini"
        type="plain"
        icon="el-icon-more"
        class="btn-text-blue"
        ref="moreBtn"
        >更多</el-button
      >
    </el-popover>
    <dialogPublic
      :title="title"
      :show.sync="show"
      width="60%"
      v-if="show"
      :noFootBtn="true"
    >
      <base-table :tableSetting="baseTableSetting"></base-table>
    </dialogPublic>
  </span>
</template>

<script>
import {
  queryApprovalRecord,
  queryRemarkRecord,
  saveRemarkRecord,
} from "@/api/orderManagement/overhaulApplication.js";
export default {
  props: {
    id: {
      type: String,
      default: "",
    },
    status: {
      type: Number,
    },
  },
  data() {
    return {
      title: "批复记录",
      show: false,
      textarea: "",
      baseTableSetting: {
        indexShow: true,
        noBorderRight: false,
        column: [
          {
            label: "批复人",
            textAlign: "center",
            prop: "updateByName",
          },
          {
            label: "批复时间",
            textAlign: "center",
            prop: "createTime",
          },
          {
            label: "批复结果",
            prop: "result",
            textAlign: "center",
            formatter: (row) => {
              return row.result == 1 ? "同意" : "不同意";
            },
          },
          {
            label: "批复意见",
            textAlign: "center",
            prop: "opinion",
          },
        ],
        data: [{ remindTime: "121212" }],
        noBorderRight: true,
        autoHeight: false,
        maxHeight: "220px",
        rowIndex: 0,
      },
      remarkList: [],
    };
  },
  methods: {
    //保存备注信息
    saveRemark() {
      let query = {
        applicationId: this.id,
        context: this.textarea,
      };
      saveRemarkRecord(query).then((res) => {
        this.$message.success(res.description);
        this.getRemarkInfo();
      });
    },
    formetter(name) {
      return name.substr(name.length - 2);
    },
    //获取备注信息
    getRemarkInfo() {
      queryRemarkRecord({ id: this.id }).then((res) => {
        if (res.code == 200) {
          this.remarkList = res.data;
        }
      });
    },
    //获取批注列表
    getDelayInfo() {
      queryApprovalRecord({ id: this.id }).then((res) => {
        if (res.code == 200) {
          let data = res.data.filter((item) => item.status == 1);
          this.$set(this.baseTableSetting, "data", data);
          this.show = true;
        }
      });
    },
    operateInfo() {
      this.$emit("showOperateInfo");
    },
    closeCustom() {
      this.$refs.customBtn.click();
      this.textarea = "";
    },
  },
};
</script>

<style lang="less" scoped>
.avatar {
  width: 50px;
  height: 50px;
  background: #c7ddff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .text {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
  }
}
.moreBtnArr {
  margin-left: 10px;
  /deep/ .el-popover {
    padding: 0px !important;
  }
}
.moreBtnContent {
  display: flex;
  flex-flow: column nowrap;
  .moreItem + .moreItem {
    margin-top: 10px;
  }
  .moreItem:hover {
    cursor: pointer;
    color: @kr-elementUI-color;
  }
}
.blockContent {
  .blockTop {
    height: 40px;
    line-height: 40px;
    display: flex;
    flex-flow: wrap nowrap;
    justify-content: space-between;

    padding: 0 12px;
  }
  .blockTitle {
    font-size: 16px;
    font-weight: bolder;
  }
  .blockItemTop {
    margin-bottom: 10px;
  }
  .blockMiddle {
    height: 500px;
    overflow: auto;
    padding: 20px 10px;
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    .content {
      display: flex;
      .userInfo {
        margin-left: 20px;
        .remark {
          margin-top: 10px;
        }
      }
    }
  }
  .blockBottom {
    padding: 5px;
  }
  .blockBtn {
    margin-top: 10px;
    text-align: right;
  }
  .closeBtn {
    font-size: 16px;
    font-weight: bolder;
  }
  .closeBtn:hover {
    cursor: pointer;
  }
}
</style>